<template>
    <el-form ref="formRef" :model="formData" label-width="150px">
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" />
        </el-form-item>

        <el-form-item label="电话" prop="tel">
            <el-input v-model="formData.tel" />
        </el-form-item>

        <el-form-item label="岗位名称" prop="position">
            <el-input v-model="formData.position" />
        </el-form-item>

        <el-form-item label="工资" prop="salary">
            <el-input v-model="formData.salary" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
            <el-input v-model="formData.status" />
        </el-form-item>

        <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="formData.deptName" />
        </el-form-item>

        <el-form-item label="部门Id" prop="deptId">
            <el-input v-model="formData.deptId" />
        </el-form-item>

        <el-form-item class="button">
            <el-button type="primary" @click="onCheckAndSubmit(formRef)">保存</el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">

import { ElMessage } from 'element-plus'

const route = useRoute()
const formRef = ref();
const formData = reactive<any>({
    email:"",
    tel:"",
    position:"",
    salary:"",
    deptName:"",
    status:1,
    deptId:""
})


onMounted(() => {
    formData.id = route.params.id
    callApi()
})

const callApi = () => {
    employeeApi.select({ id: formData.id }).then((res: any) => {
        formData.email = res[0].email
        formData.tel = res[0].tel
        formData.position = res[0].position
        formData.salary = res[0].salary
        formData.status = res[0].status
        formData.deptName = res[0].deptName
        formData.deptId = res[0].deptId
    })




}

const onSubmit = () => {


    employeeApi.update(formData).then((res: any) => {
        ElMessage.success('保存成功')

    })
}

const onCheckAndSubmit = async (formEl: any) => {

    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            onSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl: any) => {

    formEl.resetFields()
}
</script>